<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	<h:head>
		<h:outputStylesheet name="/notice.css" library="/css" />
		<h:outputStylesheet>
			.even-row {
			    background-color: #FCFFFE;
			}
			 
			.odd-row {
			    background-color: #ECF3FE;
			}
			 
			.active-row {
			    background-color: #FFEBDA !important;
			    cursor: pointer;
			}
		</h:outputStylesheet>
	</h:head>
	<h:body>
	
	
		<h:form>
			<rich:extendedDataTable value="#{beanNotice.lstNotice}" var="cap"
                selection="#{NoticeSelection.selection}" id="table"
                frozenColumns="1" style="height:300px; width:960px;" selectionMode="single">
            <a4j:ajax execute="@form" event="selectionchange" 
                listener="#{NoticeSelection.selectionListener}" render=":res" />

				<rich:column sortBy="#{cap.noticeId}" sortable="true" id="noticeId" width="100px"
					sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
	                <f:facet name="header">
	                    <a4j:commandLink value="Số" style="color: white;text-decoration: none;" />
	                </f:facet>
	                <h:outputText value="#{cap.noticeId}"/>
	            </rich:column>
	            
	            <rich:column sortBy="#{cap.typenotice}" sortable="true" id="typenotice" width="150px"
							sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
	                <f:facet name="header">
	                    <h:outputText value="Loại Thông báo" style="color: white" />
	                </f:facet>
	                <h:outputText value="#{cap.typenotice}"/>
	            </rich:column>
	            
	            <rich:column sortBy="#{cap.title}" sortable="true" id="title" width="550px"
							sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
	                <f:facet name="header">
	                    <h:outputText value="Tiêu đề" style="color: white" />
	                </f:facet>
	                <h:outputText value="#{cap.title}"/>
	            </rich:column>
	            
	            <rich:column sortBy="#{cap.dateNotice}" sortable="true" id="dateNotice" width="150px"
							sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
	                <f:facet name="header">
	                    <h:outputText value="Ngày" style="color: white" />
	                </f:facet>
	                <h:outputText value="#{cap.dateNotice}"/>
	            </rich:column>
			
			</rich:extendedDataTable>
		</h:form>
		<a4j:outputPanel id="res">
            <rich:panel header="Content of Notice selection:"
                rendered="#{not empty NoticeSelection.selectionItems}" style="width:960px; margin-top: 10px">
                <rich:list type="unordered"
                    value="#{NoticeSelection.selectionItems}" var="sel">
                    <h:outputText value="Tiêu đề: #{sel.title}" style="font-size: 14px; font-weight: bold;"/>
                    <br/>
                    <h:outputText value="#{sel.contentNotice}"/>
                </rich:list>
            </rich:panel>
        </a4j:outputPanel>
        
	</h:body>
</html>